$.extend({
    nav: function (param, dom) {
        var len = param.data.length;
        var w = param.w || 50;
        var h = param.h || 50;
        var size = param.size || 12;
        var listStyle = {
            display: 'inline-block',
            width: w + 'px', marginRight: '10px',
            textAlign: 'center',
            height: h + 'px',
            lineHeight: h + 'px',
            cursor: 'pointer',
            fontSize: size + 'px'
        };
        var bStyle = {
            position: 'absolute',
            width: w + 'px',
            height: '2px',
            background: 'red',
            bottom: '0px',
            left: 0,
            transition: 'all 0.2s'
        }
        $(dom).css({ position: 'relative' });
        var ul = $("<ul id='nav_wrapper'></ul>");
        var bBottom = $("<p class='bBottom'></p>");
        bBottom.css(bStyle);
        $(dom).append(bBottom);
        for (var i = 0; i < len; i++) {
            var li = $("<li class='nav-list'></li>");
            $(li).attr('data-pos', i * w + (i * 10) + "px")
            $(li).css(listStyle)
            $(li).text(param.data[i]);
            $(li).on('click', function (e) {
                a();
            })
            $(ul).append($(li));
        };
        $(dom).append($(ul));

        document.getElementById('nav').innerHTML = '<p>aaa</p>';
    }
});